前端 Web Locks API：用于构建强大应用程序的资源同步原语

在现代 Web 开发中，构建交互式和功能丰富的应用程序通常涉及管理共享资源和处理并发操作。如果没有适当的同步机制，这些并发操作可能会导致数据损坏、竞争条件和意外的应用程序行为。前端 Web Locks API 通过直接在浏览器环境中提供资源同步原语，提供了一个强大的解决方案。这篇博文将详细探讨 Web Locks API，涵盖其优势、用例、实现和构建强大且可靠的 Web 应用程序的注意事项。

Web Locks API 简介

Web Locks API 是一个 JavaScript API，允许开发人员协调 Web 应用程序中共享资源的使用。它提供了一种用于获取和释放资源锁定的机制，确保在任何给定时间只有一个代码可以访问特定资源。这在涉及多个浏览器选项卡、窗口或工作线程访问相同数据或执行冲突操作的场景中特别有用。

主要概念

• Lock: 一种授予对资源的独占或共享访问权限的机制。
• Resource: 任何需要同步的共享数据或功能。示例包括 IndexedDB 数据库、存储在浏览器文件系统中的文件，甚至内存中的特定变量。
• Scope: 锁定持有的上下文。锁定可以限定于特定来源、单个选项卡或共享工作线程。
• Mode: 请求锁定的访问类型。独占锁定阻止任何其他代码访问资源，而共享锁定允许多个读取者，但排除写入者。
• Request: 尝试获取锁定的行为。锁定请求可以是阻塞的（等待直到锁定可用）或非阻塞的（如果锁定不可用则立即失败）。

使用 Web Locks API 的优势

Web Locks API 为构建强大而可靠的 Web 应用程序提供了几个优势：

• 数据完整性： 通过确保并发操作不会相互干扰来防止数据损坏。
• 防止竞争条件： 通过序列化对共享资源的访问来消除竞争条件。
• 改进的性能： 通过减少争用和最小化对复杂同步逻辑的需求来优化性能。
• 简化的开发： 提供了一个清晰简单的 API 来管理资源访问，从而降低了并发编程的复杂性。
• 跨源协调： 能够跨不同源协调共享资源，从而实现更复杂和集成的 Web 应用程序。
• 增强的可靠性： 通过防止由于并发访问问题导致的意外行为来提高 Web 应用程序的整体可靠性。

Web Locks API 的用例

Web Locks API 可以应用于需要仔细管理对共享资源的并发访问的各种场景。

IndexedDB 同步

IndexedDB 是一个强大的客户端数据库，允许 Web 应用程序存储大量结构化数据。当多个选项卡或工作线程访问同一个 IndexedDB 数据库时，可以使用 Web Locks API 来防止数据损坏并确保数据一致性。例如：

            async function updateDatabase(dbName, data) {
 const lock = await navigator.locks.request(dbName, async () => {
 const db = await openDatabase(dbName);
 const transaction = db.transaction(['myStore'], 'versionchange');
 const store = transaction.objectStore('myStore');
 await store.put(data);
 await transaction.done;
 db.close();
 console.log('Database updated successfully.');
 });
 console.log('Lock released.');
}

            

              
                Copy
              
            
          

在此示例中，navigator.locks.request 方法获取由 dbName 标识的 IndexedDB 数据库的锁定。仅在获取锁定后才执行提供的回调函数。在回调中，打开数据库，创建事务并更新数据。事务完成后且数据库关闭后，锁定会自动释放。这确保了 updateDatabase 函数的只有一个实例可以在任何给定时间修改数据库，从而防止竞争条件和数据损坏。

示例： 考虑一个协作文档编辑应用程序，其中多个用户可以同时编辑同一文档。Web Locks API 可用于同步对存储在 IndexedDB 中的文档数据的访问，确保一个用户所做的更改正确反映在其他用户的视图中，而不会发生冲突。

文件系统访问

文件系统访问 API 允许 Web 应用程序访问用户本地文件系统上的文件和目录。当应用程序的多个部分或多个浏览器选项卡与同一文件交互时，可以使用 Web Locks API 来协调访问并防止冲突。例如：

            async function writeFile(fileHandle, data) {
 const lock = await navigator.locks.request(fileHandle.name, async () => {
 const writable = await fileHandle.createWritable();
 await writable.write(data);
 await writable.close();
 console.log('File written successfully.');
 });
 console.log('Lock released.');
}

            

              
                Copy
              
            
          

在此示例中，navigator.locks.request 方法获取由 fileHandle.name 标识的文件的锁定。然后，回调函数创建一个可写流，将数据写入文件，然后关闭该流。回调完成后，锁定会自动释放。这确保了 writeFile 函数的只有一个实例可以在任何给定时间修改文件，从而防止数据损坏并确保数据完整性。

示例： 想象一个基于 Web 的图像编辑器，允许用户从其本地文件系统保存和加载图像。Web Locks API 可用于防止编辑器的多个实例同时写入同一文件，这可能导致数据丢失或损坏。

Service Worker 协调

Service worker 是可以拦截网络请求并提供离线功能的后台脚本。当多个 service worker 并行运行时，或者当 service worker 与主线程交互时，可以使用 Web Locks API 来协调对共享资源的访问并防止冲突。例如：

            self.addEventListener('fetch', (event) => {
 event.respondWith(async function() {
 const cache = await caches.open('my-cache');
 const lock = await navigator.locks.request('cache-update', async () => {
 const response = await fetch(event.request);
 await cache.put(event.request, response.clone());
 return response;
 });
 return lock;
 }());
});

            

              
                Copy
              
            
          

在此示例中，navigator.locks.request 方法获取 cache-update 资源的锁定。回调函数从网络中获取请求的资源，将其添加到缓存中，然后返回响应。这确保了只有一个提取事件可以在任何给定时间更新缓存，从而防止竞争条件并确保缓存一致性。

示例： 考虑一个渐进式 Web 应用程序 (PWA)，它使用 service worker 来缓存经常访问的资源。Web Locks API 可用于防止多个 service worker 实例同时更新缓存，确保缓存保持一致且最新。

Web Worker 同步

Web worker 允许 Web 应用程序在后台执行计算密集型任务，而不会阻塞主线程。当多个 Web worker 访问共享数据或执行冲突操作时，可以使用 Web Locks API 来协调其活动并防止数据损坏。例如：

            // In the main thread:
const worker = new Worker('worker.js');
worker.postMessage({ type: 'updateData', data: { id: 1, value: 'new value' } });

// In worker.js:
self.addEventListener('message', async (event) => {
 if (event.data.type === 'updateData') {
 const lock = await navigator.locks.request('data-update', async () => {
 // Simulate updating shared data
 console.log('Updating data in worker:', event.data.data);
 // Replace with actual data update logic
 self.postMessage({ type: 'dataUpdated', data: event.data.data });
 });
 }
});

            

              
                Copy
              
            
          

在此示例中，主线程向 Web worker 发送一条消息以更新一些共享数据。然后，Web worker 在更新数据之前获取 data-update 资源的锁定。这确保了只有一个 Web worker 可以在任何给定时间更新数据，从而防止竞争条件并确保数据完整性。

示例： 想象一个 Web 应用程序，它使用多个 Web worker 来执行图像处理任务。Web Locks API 可用于同步对共享图像数据的访问，确保 worker 不会相互干扰并且最终图像是一致的。

实现 Web Locks API

Web Locks API 相对简单易用。核心方法是 navigator.locks.request，它接受两个必需参数：

• name： 一个字符串，用于标识要锁定的资源。这可以是任何对您的应用程序有意义的任意字符串。
• callback： 获取锁定后执行的函数。此函数应包含需要访问共享资源的代码。

request 方法返回一个 Promise，该 Promise 在获取锁定且回调函数完成后解析。当回调函数返回或抛出错误时，锁定会自动释放。

基本用法

            async function accessSharedResource(resourceName) {
 const lock = await navigator.locks.request(resourceName, async () => {
 console.log('Accessing shared resource:', resourceName);
 // Perform operations on the shared resource
 await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate work
 console.log('Finished accessing shared resource:', resourceName);
 });
 console.log('Lock released for:', resourceName);
}

            

              
                Copy
              
            
          

在此示例中，accessSharedResource 函数获取由 resourceName 标识的资源的锁定。然后，回调函数对共享资源执行一些操作，并使用 2 秒的延迟来模拟工作。回调完成后，锁定会自动释放。控制台日志将显示何时正在访问资源以及何时释放锁定。

锁定模式

navigator.locks.request 方法还接受一个可选的 options 对象，该对象允许您指定锁定模式。可用的锁定模式为：

• 'exclusive'： 默认模式。授予对资源的独占访问权限。在释放独占锁定之前，没有其他代码可以获取对资源的锁定。
• 'shared'： 允许多个读取者同时访问资源，但排除写入者。一次只能持有一个独占锁定。

            async function readSharedResource(resourceName) {
 const lock = await navigator.locks.request(resourceName, { mode: 'shared' }, async () => {
 console.log('Reading shared resource:', resourceName);
 // Perform read operations on the shared resource
 await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate reading
 console.log('Finished reading shared resource:', resourceName);
 });
 console.log('Shared lock released for:', resourceName);
}

async function writeSharedResource(resourceName) {
 const lock = await navigator.locks.request(resourceName, { mode: 'exclusive' }, async () => {
 console.log('Writing to shared resource:', resourceName);
 // Perform write operations on the shared resource
 await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate writing
 console.log('Finished writing to shared resource:', resourceName);
 });
 console.log('Exclusive lock released for:', resourceName);
}

            

              
                Copy
              
            
          

在此示例中，readSharedResource 函数获取对资源的共享锁定，允许多个读取者并发访问资源。writeSharedResource 函数获取独占锁定，阻止任何其他代码访问资源，直到写入操作完成。

非阻塞请求

默认情况下，navigator.locks.request 方法是阻塞的，这意味着它将等待直到锁定可用，然后才执行回调函数。但是，您也可以通过指定 ifAvailable 选项来发出非阻塞请求：

            async function tryAccessSharedResource(resourceName) {
 const lock = await navigator.locks.request(resourceName, { ifAvailable: true }, async () => {
 console.log('Successfully acquired lock and accessing shared resource:', resourceName);
 // Perform operations on the shared resource
 await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate work
 console.log('Finished accessing shared resource:', resourceName);
});

 if (!lock) {
 console.log('Failed to acquire lock for:', resourceName);
 }
 console.log('Attempt to acquire lock completed.');
}

            

              
                Copy
              
            
          

在此示例中，tryAccessSharedResource 函数尝试获取资源的锁定。如果锁定立即可用，则执行回调函数，并且 Promise 使用一个值解析。如果锁定不可用，则 Promise 使用 undefined 解析，表明无法获取锁定。这允许您在资源当前被锁定时实现替代逻辑。

处理错误

使用 Web Locks API 时，必须处理潜在的错误。如果获取锁定时出现问题，navigator.locks.request 方法可能会引发异常。您可以使用 try...catch 块来处理这些错误：

            async function accessSharedResourceWithErrorHandler(resourceName) {
 try {
 await navigator.locks.request(resourceName, async () => {
 console.log('Accessing shared resource:', resourceName);
 // Perform operations on the shared resource
 await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate work
 console.log('Finished accessing shared resource:', resourceName);
 });
 console.log('Lock released for:', resourceName);
 } catch (error) {
 console.error('Error accessing shared resource:', error);
 // Handle the error appropriately
 }
}

            

              
                Copy
              
            
          

在此示例中，锁定获取期间或回调函数中发生的任何错误都将被 catch 块捕获。然后，您可以适当地处理错误，例如记录错误消息或向用户显示错误消息。

注意事项和最佳实践

使用 Web Locks API 时，重要的是要考虑以下最佳实践：

• 保持锁定时间短： 尽可能短地持有锁定，以最大程度地减少争用并最大程度地提高性能。
• 避免死锁： 获取多个锁定时要小心，以避免死锁。确保始终以相同的顺序获取锁定，以防止循环依赖。
• 选择描述性资源名称： 为您的资源使用描述性和有意义的名称，以使您的代码更易于理解和维护。
• 优雅地处理错误： 实施适当的错误处理，以优雅地从锁定获取失败和其他潜在错误中恢复。
• 彻底测试： 彻底测试您的代码，以确保它在并发访问条件下正常运行。
• 考虑替代方案： 评估 Web Locks API 是否是您的特定用例最合适的同步机制。在某些情况下，其他选项（例如原子操作或消息传递）可能更合适。
• 监视性能： 监视应用程序的性能，以识别与锁定争用相关的潜在瓶颈。使用浏览器开发人员工具分析锁定获取时间并确定优化领域。

浏览器支持

Web Locks API 在包括 Chrome、Firefox、Safari 和 Edge 在内的主要浏览器中具有良好的浏览器支持。但是，最好始终在 Can I use 等资源上查看最新的浏览器兼容性信息，然后再在生产应用程序中实施它。您还可以使用功能检测来检查当前浏览器是否支持该 API：

            if ('locks' in navigator) {
 console.log('Web Locks API is supported.');
 // Use the Web Locks API
} else {
 console.log('Web Locks API is not supported.');
 // Implement an alternative synchronization mechanism
}

            

              
                Copy
              
            
          

高级用例

分布式锁

虽然 Web Locks API 主要用于协调对单个浏览器上下文中的资源的访问，但它也可以用于实现跨多个浏览器实例甚至跨不同设备的分布式锁定。这可以通过使用共享存储机制（例如服务器端数据库或基于云的存储服务）来跟踪锁的状态来实现。

例如，您可以将锁定信息存储在 Redis 数据库中，并将 Web Locks API 与服务器端 API 结合使用来协调对共享资源的访问。当客户端请求锁定时，服务器端 API 将检查 Redis 中是否可用该锁定。如果是，则 API 将获取锁定并向客户端返回成功响应。然后，客户端将使用 Web Locks API 来获取对资源的本地锁定。当客户端释放锁定时，它将通知服务器端 API，然后服务器端 API 将释放 Redis 中的锁定。

基于优先级的锁定

在某些情况下，可能需要优先考虑某些锁定请求。例如，您可能希望优先考虑来自管理用户的锁定请求，或者优先考虑对应用程序功能至关重要的锁定请求。Web Locks API 不直接支持基于优先级的锁定，但您可以使用队列来管理锁定请求来自己实现它。

收到锁定请求时，您可以将其添加到带有优先级值的队列中。然后，锁定管理器将按优先级顺序处理队列，首先授予最高优先级请求的锁定。这可以使用诸如优先级队列数据结构或自定义排序算法之类的技术来实现。

Web Locks API 的替代方案

虽然 Web Locks API 提供了一种强大的机制来同步对共享资源的访问，但它并非总是解决每个问题的最佳方案。根据具体用例，其他同步机制可能更合适。

• 原子操作： 原子操作，例如 JavaScript 中的 Atomics，提供了一种低级机制，用于对共享内存执行原子读取-修改-写入操作。这些操作保证是原子的，这意味着它们将始终在没有中断的情况下完成。原子操作可用于同步对简单数据结构（例如计数器或标志）的访问。
• 消息传递： 消息传递涉及在应用程序的不同部分之间发送消息以协调其活动。这可以使用诸如 postMessage 或 WebSockets 之类的技术来实现。消息传递可用于同步对复杂数据结构的访问，或用于协调不同浏览器上下文之间的活动。
• 互斥锁和信号量： 互斥锁和信号量是传统的同步原语，通常用于操作系统和多线程编程环境中。虽然这些原语在 JavaScript 中不可直接使用，但您可以使用诸如 Promise 和 setTimeout 之类的技术自己实现它们。

真实世界的示例和案例研究

为了说明 Web Locks API 的实际应用，让我们考虑一些真实世界的示例和案例研究：

• 协作白板应用程序： 协作白板应用程序允许多个用户同时在共享画布上绘制和注释。Web Locks API 可用于同步对画布数据的访问，确保一个用户所做的更改正确反映在其他用户的视图中，而不会发生冲突。
• 在线代码编辑器： 在线代码编辑器允许多个用户协作编辑同一代码文件。Web Locks API 可用于同步对代码文件数据的访问，防止多个用户同时进行冲突的更改。
• 电子商务平台： 电子商务平台允许多个用户同时浏览和购买产品。Web Locks API 可用于同步对库存数据的访问，确保产品不会被超额销售并且库存计数保持准确。
• 内容管理系统 (CMS)： CMS 允许多个作者同时创建和编辑内容。Web Locks API 可用于同步对内容数据的访问，防止多个作者同时对同一文章或页面进行冲突的更改。

结论

前端 Web Locks API 提供了一个有价值的工具，用于构建能够有效处理并发操作的强大而可靠的 Web 应用程序。通过直接在浏览器环境中提供资源同步原语，它可以简化开发过程并降低数据损坏、竞争条件和意外行为的风险。无论您是构建协作应用程序、基于文件系统的工具还是复杂的 PWA，Web Locks API 都可以帮助您确保数据完整性并改善整体用户体验。了解其功能和最佳实践对于寻求创建高质量、弹性应用程序的现代 Web 开发人员至关重要。